:host {
  .ant-layout-header {
    box-sizing: border-box;
    height: 60px;
    background-color: #262f3e;
    padding: 0;
  }

  .ant-layout {
    height: 100%;
  }

  .ant-layout-sider {
    background-color: #1e222d;
  }

  .content-head {
    position: relative;
    box-sizing: border-box;
    background: #ffffff;
    height: 50px;
    padding-left: 20px;
    box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
    // border-bottom: 1px solid rgba(0, 0, 0, .15);
    overflow: hidden;
    z-index: 2;

    .content-head-bread {
      display: flex;
      align-items: center;
      height: 100%;
      font-size: 16px;
      color: #303133;

      .back-icon {
        color: #006eff;
        padding-right: 10px;

        &:hover {
          cursor: pointer;
        }
      }
    }
  }

  .ant-layout-content {
    box-sizing: border-box;
    position: relative;
    padding: 20px;
    overflow-y: auto;
  }
}

.head-wrap {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .logo {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;

    img {
      height: 31px;
    }

    span {
      color: #e2e5e8;
      font-size: 18px;
      padding-left: 12px;
    }
  }

  .head-operation {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;

    .header-menu {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      height: 60px;
      line-height: 60px;
      background-color: transparent;
      overflow-y: auto;

      li {
        .menu-li-text {
          position: relative;
          z-index: 8;
        }

        .menu-li-bg {
          position: absolute;
          top: 0;
          right: 0;
          width: 100%;
          height: 100%;
          z-index: 2;
          background: url('../../../assets/images/lantern.png') no-repeat;
          background-position: left bottom;
          background-size: contain;
          opacity: 0.65;
        }
      }

      &::-webkit-scrollbar {
        width: 6px;
        height: 100%;
        background: rgba(255,255,255,.6);
      }
      &::-webkit-scrollbar-thumb {
        width: 6px;
        height: 10px;
        border-radius: 3px;
        background: rgba(255,255,255,.4);
      }
    }

    .opera-dl {
      box-sizing: border-box;
      display: flex;
      align-items: center;
      height: 60px;
      padding-right: 12px;

      dd {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 60px;
        font-size: 15px;
        color: #c1c6c8;
        padding: 0 20px;

        &:hover {
          cursor: pointer;
          background-color: #344258;
        }

        .user-name {
          font-size: 14px;
          white-space: nowrap;
        }

        .drop-down {
          display: flex;
          align-items: center;
        }
      }
    }
  }
}

::ng-deep .dropdowm-wrap {
  box-sizing: border-box;

  dd, dt {
    box-sizing: border-box;
    width: 120px;
    margin: 0;
    padding: 0;
    font-size: 13px;
    color: #344258;
    padding: 6px 0 6px 10px;

    &:hover {
      cursor: pointer;
      background: rgba(0, 0, 0, .05);
    }
  }

  dd {
    border-bottom: 1px solid #E4E7ED;
  }

  i {
    margin-right: 10px;
  }
}

.upFile {
  width: 130px;
  height: 130px;
  line-height: initial;
  padding: 44px 12px;
  position: relative;
  display: inline-block;
  text-align: center;
  border: 1px dashed #bfbfbf;
  cursor: pointer;
  span{
    display: block;
  }
  input {
    display: none;
  }
}
.videoImg{
  width: 132px;
  height: 132px;
  padding: 10px;
  line-height: initial;
  float: left;
  text-align: center;
  border: 1px solid #eee;
  img{
    width: 84px;
    height: auto;
    margin-bottom: 6px;
  }
  a{
    display: block;
  }
}

// start 左侧菜单样式
[nz-menu] {
  width: 100%;
  background-color: #1e222d;
  span{
    color: #c1c6c8;
  }
}
:host ::ng-deep .ant-menu ul{
  padding-bottom: 10px !important;
}
:host ::ng-deep .ant-menu-dark .ant-menu-inline.ant-menu-sub{
  background-color: #151822;
}
:host ::ng-deep .ant-menu-dark .ant-menu-inline.ant-menu-sub li{
  margin: 0 !important;
  // padding-left: 19px !important;
}
:host ::ng-deep .ant-menu-dark .ant-menu-inline.ant-menu-sub li:hover{
  background-color: #262f3e;
}
:host ::ng-deep .ant-menu-dark.ant-menu-dark:not(.ant-menu-horizontal) .ant-menu-item-selected{
  background-color: #006eff !important;
}
// :host ::ng-deep .ant-menu-dark .ant-menu-inline.ant-menu-sub li:before {
//   content: "";
//   background-color: #7c878e;
//   width: 3px;
//   height: 3px;
//   border-radius: 10px;
//   margin-right: 14px;
//   display: inline-block;
//   vertical-align: text-top;
//   margin-top: 9px;
//   margin-left: 10px;
// }
:host ::ng-deep .ant-menu-dark .ant-menu-submenu-open{
  color: #c1c6c8 !important;
}
:host ::ng-deep .ant-menu-dark .ant-menu-submenu-title{
  margin: 0 !important;
}
:host ::ng-deep .ant-menu-dark .ant-menu-submenu-title:hover{
  color: #c1c6c8 !important;
  background: #262f3e;
}
:host ::ng-deep .ant-menu-dark .ant-menu-item:hover {
  color: #c1c6c8 !important;
}
:host ::ng-deep .ant-menu-dark .ant-menu-item-selected:hover{
  color: #fff !important;
}
// end 左侧菜单样式
.refreshCache{
  width: 98px;
  height: 40px;
  line-height: 40px;
  padding-left: 12px;
  display: inline-flex;
  position: fixed;
  right: -58px;
  bottom: 140px;
  color: #fff;
  background-color: #006eff;
  border-radius: 100px 0 0 100px;
  box-shadow: 0 10px 20px 0 rgba(19,41,75,.2);
  text-align: left;
  transition: all .3s ease-in-out;
  i{
    margin: 10px 0;
    font-size: 20px;
  }
  span{
    margin-left: 8px;
    font-size: 12px;
  }
  &:hover{
    right: 0;
  }
}

::ng-deep  nz-form-item{
  margin-bottom: 10px;
}
// ::ng-deep.ant-form-item-label > label{
//   padding-right: 14px;
// }
//  ::ng-deep.ant-form-item-label{
//   text-align: left;
// }
// ::ng-deep .ant-form-item-label > label::after{
//   display: none;
// }

// ::ng-deep.ant-form-item-label > label::before{
//   margin-right: 4px;
//   font-size: 12px !important;
//   font-family:auto !important;
//   line-height: inherit !important;
//   position: absolute;
//   right: 0;
//   top: 8px;
// }

:host ::ng-deep .head-operation {
  .ant-menu-item {
    &:hover {
      background: rgba(255, 255, 255, .06);
    }
  }

  .ant-menu-item-selected {
    background: #1890ff;
    background: linear-gradient(to top, #1890ff, #262f3e);
    
    .menu-li-text {
      color: #ffffff;
    }

    &:hover {
      background: #1890ff;
      background: linear-gradient(to top, #1890ff, #262f3e);
    }
  }
}

